<template>
  <div class="cml-module">
    <ul class="cml-module-list drag-ul">
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ parentLimitationText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-switch
            size="small"
            :checked="parentLimitation"
            @change="changeParentLimitation"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ isResizableText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-switch
            size="small"
            :checked="isResizable"
            @change="changeIsResizable"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ isDraggableText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-switch
            size="small"
            :checked="isDraggable"
            @change="changeIsDraggable"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ snapToGridText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-switch
            size="small"
            :checked="snapToGrid"
            @change="changeSnapToGrid"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p
          :class="[
            'cml-module-item-t',
            !snapToGrid ? 'grid-disabled' : '',
            'grid'
          ]"
        >
          {{ gridXText }}:
        </p>
        <span class="cml-module-item-o drag-value">
          <a-input-number
            size="small"
            :min="1"
            v-model="gridX"
            @change="changeGridX"
            :disabled="!snapToGrid"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p
          :class="[
            'cml-module-item-t',
            'grid',
            !snapToGrid ? 'grid-disabled' : ''
          ]"
        >
          {{ gridYText }}:
        </p>
        <span class="cml-module-item-o drag-value">
          <a-input-number
            size="small"
            :min="50"
            v-model="gridY"
            @change="changeGridY"
            :disabled="!snapToGrid"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ minWidthText }}:</p>
        <span class="cml-module-item-o drag-value">
          <a-input-number
            size="small"
            :min="50"
            v-model="minWidth"
            @change="changeMinWidth"
          />
        </span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ minHeightText }}:</p>
        <span class="cml-module-item-o drag-value"
          ><a-input-number
            size="small"
            :min="50"
            v-model="minHeight"
            @change="changeMinHeight"
        /></span>
      </li>
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ axisText }}</p>
        <span class="cml-module-item-o drag-value">
          <a-select
            style="150px"
            :value="axis"
            :options="axisOption"
            @change="changeAxis"
          >
          </a-select>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import { Select, Input, Switch, InputNumber } from 'ant-design-vue'
import CmlModule from '@/assets/js/app/cmlpanel/components/cml-module'
import { partServer } from 'anov-core'

export default {
  components: {
    ASelect: Select,
    AInput: Input,
    ASwitch: Switch,
    AInputNumber: InputNumber,
    CmlModule
  },
  data() {
    return {
      ...partServer.dragOpt,
      axisOption: [
        {
          label: 'X',
          value: 'x'
        },
        {
          label: 'Y',
          value: 'y'
        },
        {
          label: 'Both',
          value: 'both'
        }
      ]
    }
  },
  computed: {
    parentLimitationText() {
      return this.$t('cmlpanel.parentLimitationText')
    },
    isResizableText() {
      return this.$t('cmlpanel.isResizableText')
    },
    isDraggableText() {
      return this.$t('cmlpanel.isDraggableText')
    },
    snapToGridText() {
      return this.$t('cmlpanel.snapToGridText')
    },
    gridXText() {
      return this.$t('cmlpanel.gridXText')
    },
    gridYText() {
      return this.$t('cmlpanel.gridYText')
    },
    minWidthText() {
      return this.$t('cmlpanel.minWidthText')
    },
    minHeightText() {
      return this.$t('cmlpanel.minHeightText')
    },
    axisText() {
      return this.$t('cmlpanel.axisText')
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    changeAspectRatio(v) {
      this.aspectRatio = v
      partServer.changeDragOpt({ aspectRatio: v })
    },
    changeParentLimitation(v) {
      this.parentLimitation = v
      partServer.changeDragOpt({ parentLimitation: v })
    },
    changeIsResizable(v) {
      this.isResizable = v
      partServer.changeDragOpt({ isResizable: v })
    },
    changeIsDraggable(v) {
      this.isDraggable = v
      partServer.changeDragOpt({ isDraggable: v })
    },
    changeSnapToGrid(v) {
      this.snapToGrid = v
      partServer.changeDragOpt({ snapToGrid: v })
    },
    changeGridX(v) {
      this.gridX = v
      partServer.changeDragOpt({ gridX: v })
    },
    changeGridY(v) {
      this.gridY = v
      partServer.changeDragOpt({ gridY: v })
    },
    changeMinWidth(v) {
      this.minWidth = v
      partServer.changeDragOpt({ minWidth: v })
    },
    changeMinHeight(v) {
      this.minHeight = v
      partServer.changeDragOpt({ minHeight: v })
    },
    changeAxis(v) {
      this.axis = v
      partServer.changeDragOpt({ axis: v })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/panel-var.scss';
@import '@/assets/css/panel-mixin.scss';
.cml-module .drag-ul {
  background-color: transparent;
  .cml-module-item {
    padding-left: 20px;
  }
  .grid {
    transition: all ease 0.2s;
  }
  .grid-disabled {
    color: #4f6161;
  }
}
/deep/ {
  .ant-input-number {
    width: 70px;
    border: 1px solid #141518;
    background-color: #141518;
  }
  .ant-input-number-input {
    width: 70px;
    color: #44cbd7;
    &:focus {
      box-shadow: 0 0 0 1px #44cbd7;
    }
  }
  .ant-input-number-focused {
    box-shadow: none;
  }
  .ant-input-number-disabled .ant-input-number-input {
    color: #4f6161;
  }
  .ant-input-number-handler-wrap {
    display: none;
  }
}
.drag-value {
  margin-right: 15px;
}
</style>
